<!-- 
  组件及其组件化知识点复习 - 预计花费时间30min

  我们以实际需求为引，根据实现需求时所遇见的问题再对组件化进行讨论
  需求：展示三个可折叠窗口
  存在的问题：
    我们的思路是：先创建一个可折叠面板，然后直接复制代码
    虽然静态样式复制后能够正常显示，但是js代码却不行
    因为我们不管复制多少份，最终都是使用的同一份js代码，此时牵一发而动全身
    作用域没有进行分开
  此时就可以引出我们本节所要学习的内容：组件及其组件化
-->

<script setup>
  import {ref} from "vue"
  const isShow = ref(true)
  const isShow1 = ref(true)
</script>

<template>
  <div class="panel-box">
    <h4 class="title">可折叠面板</h4>
    <div class="panel">
      <div class="top">
        <span>自由与爱情</span>
        <span @click="isShow = !isShow" style="cursor: pointer;">
          {{ isShow ? "折叠" : "展开" }}
        </span>
      </div>
      <div class="bottom"
      v-show="isShow">
        <p>生命诚可贵，</p>
        <p>自由价更高。</p>
        <p>若为自由故，</p>
        <p>两者皆可抛。</p>
      </div>
    </div>
    <div class="panel">
      <div class="top">
        <span>自由与爱情</span>
        <span @click="isShow1 = !isShow1" style="cursor: pointer;">
          {{ isShow1 ? "折叠" : "展开" }}
        </span>
      </div>
      <div class="bottom"
      v-show="isShow1">
        <p>生命诚可贵，</p>
        <p>自由价更高。</p>
        <p>若为自由故，</p>
        <p>两者皆可抛。</p>
      </div>
    </div>
  </div>
</template>

<style>
  body {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    background-color: #ccc;
  }
  .panel-box {
    margin: 280px auto;
    padding: 10px 10px;
    width: 350px;
    border: 2px solid green;
    border-radius: 1em;
    background-color: #fff;
  }
  .title {
    text-align: center;
  }
  .top {
    display: flex;
    padding: 2px 4px;
    justify-content: space-between;
    border: 1px solid #ccc;
  }
  .bottom {
    padding: 2px 4px;
    border: 1px solid #ccc;
    border-top: 1px solid transparent;
  }
</style>